﻿@{
    ViewData["Title"] = "Index";
    Layout = null;
}
<link href="~/libs/layui-v2.9.21/layui-v2.9.21/layui/css/layui.css" rel="stylesheet" />

<style>
    .layui-col-md6 {
        padding-right: 250px; /* 减少右边距 */
        padding-left: -150px; /* 减少左边距 */
    }

        .layui-col-md6:first-child {
            padding-right: 5px; /* 更进一步减少左边树形结构的右边距 */
        }

        .layui-col-md6:last-child {
            padding-left: 5px; /* 更进一步减少右边表单的左边距 */
        }
</style>

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md6">
            <div id="ID-tree-demo"></div>
        </div>
        <div class="layui-col-md6">
            <form class="layui-form" id="permission-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">ID</label>
                    <div class="layui-input-block">
                        <input type="text" name="id" id="id" required lay-verify="required" placeholder="已经用不可输入" autocomplete="off" class="layui-input" readonly>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="permissionName" id="permissionName" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">页面地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="pageUrl" id="pageUrl" required lay-verify="required" placeholder="请输入页面地址" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item" style="display:none;">
                    <label class="layui-form-label">Pid</label>
                    <div class="layui-input-block">
                        <input type="text" name="pid" id="pid" required lay-verify="required" placeholder="请输入页面地址" autocomplete="off" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">是否启用</label>
                    <div class="layui-input-block">
                        <input type="radio" id="isDel" name="isDel" value="1" title="启用" checked>
                        <input type="radio" id="isDel" name="isDel" value="2" title="禁用">
                    </div>
                </div>


                <div class="layui-form-item">
                    <button class="layui-btn" lay-submit lay-filter="demol">添加子集</button>
                    <button class="layui-btn" lay-submit lay-filter="demo2">添加同级</button>
                    <button class="layui-btn" lay-submit lay-filter="demo3">保存数据</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>

            </form>
        </div>
    </div>
</div>

<script src="~/libs/layui-v2.9.21/layui-v2.9.21/layui/layui.js"></script>
<script src="~/libs/jquery/jquery.js"></script>


<script>
    layui.use(['tree', 'layer', 'util', 'form'], function () {
        var tree = layui.tree;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;

        function terrPermission(){
               $.ajax({
                     url: '/Permission/TreePermission',
                     type: 'get',
                     dataType: 'json',
                     async: false,
                     success: function (res) {
                         console.log(res);
                    
                         // 渲染树形组件
                         tree.render({
                             elem: '#ID-tree-demo',
                             data: res,
                             onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                             id: 'demo-id-1',
                             isJump: true, // 是否允许点击节点时弹出新窗口跳转
                             treeDefaultClose: false,//默认全部展开
                             click: function (obj) {
                                 var data = obj.data;  // 获取当前点击的节点数据
                                 fillForm(data); // 填充表单
                             }
                         });
                     }
               });
        }


        terrPermission()


        // 填充表单的函数
        function fillForm(data) {
            console.log(data);
              $.ajax({
                  url: '/Permission/GetPermission',
                  type: 'get',
                  data:{
                      id:data.id
                  },
                  dataType: 'json',
                   async:false,
                  success: function (res) {
                  console.log(res);
                      $('#id').val(res.id);
                      $('#permissionName').val(res.permissionName);
                      $("#pageUrl").val(res.pageUrl)
                      $("#isDel").val(res.isDel)
                      $("#pid").val(res.pid)
                      form.render(); // 重新渲染表单
                  }
              })
        }


        //保存子级
    form.on('submit(demol)', function(data) {
            var field = data.field; // 获取表单数据
            field.pid = parseInt($('#id').val()); // 设置 pid

            // 进行其他字段的处理
            field.icon="1"
            field.state=1
            field.sortId=1
            field.isDel=parseInt(field.isDel)
            console.log(field)
            alert(JSON.stringify(field))

            $.ajax({
                url: '/Permission/AddSon',
                type: 'post',
                data: field,
                dataType: 'json',
                async: false, //改为异步
                success: function(res) {
                    console.log(res);
                    if (res > 0) {
                        layer.msg('添加成功');
                        layer.msg(res.msg, {icon: 1, time: 1000, title: 'OK'}, function() {
                            location.reload(); //刷新页面
                        });
                    } else {
                        layer.msg('添加失败！标题重试');
                        return;
                    }
                }
            });

    });

        //保存同级
    form.on('submit(demo2)', function(data){

         layer.confirm('确定要添加同级？ 亲！？', function (index) {
              var field = data.field; // 获取表单字段值
              // 显示填写结果，仅作演示用

              field.pid=parseInt($("#pid").val())
              field.icon="1"
              field.state=1
              field.sortId=1
              field.isDel=parseInt(field.isDel)
              console.log(field)

              $.ajax({
                  url: '/Permission/AddEquality',
                  type: 'post',
                  data:field,
                  dataType: 'json',
                   async:false,
                  success: function (res) {
                  console.log(res);
                       if(res>0){
                         layer.msg('添加成功');
                         layer.msg(res.msg,{icon:1,time:1000,title:'OK了,老铁'},function(){
                               location.reload();
                         });

                       }else{
                           layer.msg('添加失败！标题重复');
                           return;
                       }
                  }
              })
         });

          return false; // 阻止默认 form 跳转
    });


    //保存数据
    form.on('submit(demo3)', function(data){
         layer.confirm('确定要修改数据吗？ 亲！？', function (index) {
              var field = data.field; // 获取表单字段值
              // 显示填写结果，仅作演示用
              field.id=parseInt(field.id)
              field.pid=parseInt($("#pid").val())
              field.icon="1"
              field.state=1
              field.sortId=1
              field.isDel=parseInt(field.isDel)
              console.log(field)

              $.ajax({
                  url: '/Permission/AddUpdate',
                  type: 'post',
                  data:field,
                  dataType: 'json',
                   async:false,
                  success: function (res) {
                  console.log(res);
                       if(res>0){
                         layer.msg(res.msg,{icon:1,time:1000,title:'OK了,老铁'},function(){
                               location.reload();
                         });
                       }else{
                           layer.msg('修改失败！标题重复');
                           return;
                       }
                  }
              })
         });
          return false; // 阻止默认 form 跳转
    });

    // 按钮事件
    util.event('lay-on', {
        getChecked: function (othis) {
            var checkedData = tree.getChecked('demo-id-1'); // 获取选中节点的数据

            layer.alert(JSON.stringify(checkedData), { shade: 0 });
            console.log(checkedData);
        },
        setChecked: function () {
            tree.setChecked('demo-id-1', [12, 16]); // 勾选对应 id 值的节点
        },
        reload: function () {
            tree.reload('demo-id-1', {}); // 重载实例
        }
    });



    });
</script>

